<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
<!-- 

 1.cursor
作用：定义鼠标指针在元素上的显示样式。
取值：
auto：浏览器根据当前上下文自动选择合适的光标样式。
default：默认光标，通常是一个箭头。
none：无光标可见。
context-menu：表示上下文菜单可用。
help：表示可用的帮助。
pointer：表示可用于点击的指针，通常是一个手形。
progress：表示正在进行中的操作。
wait：表示等待。
cell：表示可调整大小的单元格。
crosshair：十字线形状，表示可用于选择。
text：光标形状为文本输入光标。
vertical-text：垂直文本输入光标。
alias：表示链接别名。
copy：表示可复制。
move：表示可移动。
no-drop：表示不允许拖放操作。
not-allowed：表示不允许的操作。
ew-resize、ns-resize、nesw-resize、nwse-resize：表示不同方向的调整大小光标。
col-resize：表示列调整大小的光标。
row-resize：表示行调整大小的光标。
all-scroll：表示可移动的光标。
grab：表示可抓取。
grabbing：表示正在抓取。
url(...)：自定义光标样式，括号中为光标图像的源文件路径。


2. 其他与鼠标交互相关的属性
虽然这些属性不直接改变鼠标指针的样式，但它们影响鼠标与元素的交互方式：
pointer-events：
作用：控制元素是否响应鼠标事件。
取值：
auto：元素响应鼠标事件。
none：元素不响应鼠标事件。

user-select：
作用：控制用户是否可以选择元素的内容。
取值：
auto：用户可以选择元素的内容。
none：用户无法选择元素的内容


3. 伪类选择器与鼠标交互
CSS还提供了一些伪类选择器，用于在鼠标与元素交互时改变元素的样式：
:hover：当鼠标悬停在元素上时应用样式。
:active：当鼠标点击元素时应用样式。
:focus：当元素获得焦点时应用样式（通常通过鼠标点击或键盘操作）。

-->